<template>
	<view>
		<view class="topSearch">
			<u-search :clearabled="true"  v-model="key" bgColor='#fff' :animation="true" @custom='doSearch' ></u-search>
		</view>
		<view class="zw"></view>
		<view class="wrapper">
			<view class="list">
				<view class="good" v-for="(good, key) in foodList" :key="key">
					<view class="image" v-if="good.imgePath">
						<u-lazy-load border-radius='10' :image="good.imgePath"  height='180'
							img-mode="aspectFill" :duration='300' style="width: 180rpx !important;"></u-lazy-load>
					</view>
					<image src="../../static/null.jpg" class="image" mode="aspectFill" v-else ></image>
					<view :class="good.foodName!=='温馨提示'?'right':'price_and_tip'">
						<text class="name">{{ good.foodName }}</text>
						<text class="tips">{{ good.clickAlertMess }}</text>
						<view class="price_and_action" v-if="good.foodName!=='温馨提示'">
							<view class="">
								<text style="color: rgb(252,31,31);">¥</text>
								<text class="price">{{ good.price }}</text>
							</view>
							<view class="btn-group" v-if="Number(good.skuNums) > 1 || (good.tasteGroupList && good.tasteGroupList != '[]')">
								<button type="primary" class="btn property_btn"
									hover-class="none" size="mini"
									@tap="showGoodDetailModal(item, good,0)">
									选规格
								</button>
								<view class="dot" v-show="goodCartNum(good.foodId)">
									{{ goodCartNum(good.foodId) }}</view>
							</view>
							<view class="btn-group" v-else>
								<button type="default" v-show="goodCartNum(good.foodId)" plain
									class="btn reduce_btn" size="mini" hover-class="none"
									@tap="handleReduceFromCart(item, good)">
									<view class="iconfont iconsami-select"></view>
								</button>
								<view class="number" v-show="goodCartNum(good.foodId)">
									{{ goodCartNum(good.foodId) }}</view>
								<button type="primary" class="btn add_btn" size="min"
									hover-class="none"
									@tap="showGoodDetailModal(item, good,1)">
									<view class="iconfont iconadd-select"></view>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				shopId:0,
				key:'',//关键字
				nullInfo: false, //空数据状态
				foodList:[],
				cart: [], //购物车
			}
		},
		computed: {
			
			
			goodCartNum() { //计算单个餐品添加到购物车的数量
				return (id) => this.cart.reduce((acc, cur) => {
					if (cur.id === id) {
						return acc += cur.number
					}
					return acc
				}, 0)
			},
			menuCartNum() {
				return (id) => this.cart.reduce((acc, cur) => {
					if (cur.cate_id === id) {
						return acc += cur.number
					}
					return acc
				}, 0)
			},
			getCartGoodsNumber() { //计算购物车总数
				return this.cart.reduce((acc, cur) => acc + cur.number, 0)
			},
			getCartGoodsPrice() { //计算购物车总价
			    if(this.cart.length == 0){
					return  0
				}else{
					var price = Number(this.cart.reduce((acc, cur) => acc + cur.number * cur.price + cur.number * cur.takeoutPackagingFee, 0))
					return  Number(this.minDeliveryFee) + price
				}
			},
			getCartPackagingFee() { //计算购物车打包费
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.takeoutPackagingFee, 0)
			},
			disabledPay() { //是否达到起送价
				return  (this.getCartGoodsPrice < this.minCost) ? true : false
			},
			spread() { //差多少元起送
				return parseFloat((this.minCost - this.getCartGoodsPrice).toFixed(2))
			}
		},
		onLoad(e) {
			this.shopId = e.id
		},
		methods:{
			//搜索点击
			doSearch(){
				if(!this.key){
					uni.showToast({
						icon:'none',
						title:'请输入菜品关键词'
					})
				}else{
					this.getData()
				}
			},
			
			getData() {
				var that = this;
				uni.showLoading({
					title:'搜索中',
					mask:true
				})
				that.uni_request({
					url: '/api/food/searchFood',
					method: 'POST',
					data: {
						foodName:that.key,
						shopId:that.shopId
					},
					success: (res) => {
						uni.hideLoading()
						console.log(res)
						if (res.data.code == 0 || res.data.code == 200) {
							that.foodList = res.data.data;
							if (that.foodList.length == 0) {
								that.nullInfo = true
							} else {
								that.nullInfo = false
							}
			
						} else {
							that.nullInfo = true
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail(e) {
			
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff !important;
	}
	.zw{
		width: 100vw;height: 65px;
	}
	.topSearch{
		padding: 15px;background: #f5f2f0 !important;
		position: fixed;top: 0;width: 100vw;z-index: 9;
	}
	.wrapper {
		padding: 20rpx;
		.list {
			width: 100%;
			font-size: $font-size-base;
			padding-bottom: 130rpx;
			.good {
				width: 100%;
				display: flex;
				align-items: flex-start;
				margin-bottom: 30rpx;
					
				.image {
					width: 180rpx !important;
					height: 180rpx ;
					margin-right: 15rpx;border-radius: 8rpx;
				}
				.price_and_tip{
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;
					padding-right: 7px;
					.name {
						font-size: $font-size-base;
						margin-bottom: 10rpx;
					}
					
					.tips {
						width: 100%;
						font-size: $font-size-sm;
						color: $text-color-assist;
						
					}
				}
				.right {
					width: calc(100% - 195rpx);
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					height: 180rpx;
					position: relative;
					.name {
						font-size: 16px;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					
					.tips {
						width: 100%;
						
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size: 12px;
						
						color: $text-color-assist;
						
					}
					
					.price_and_action {
						position: absolute;
						bottom: 0;
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
					
						.price {
							font-size: $font-size-base;
							font-weight: 600;
							font-size: 20px;
							margin-left: 1px;
							color: rgb(252,31,31);
						}
					
						.btn-group {
							display: flex;
							justify-content: space-between;
							align-items: center;
							position: relative;
					
							.btn {
								padding: 0 20rpx;
								box-sizing: border-box;
								font-size: $font-size-sm;
								height: 44rpx;
								line-height: 44rpx;
					
								&.property_btn {
									border-radius: 24rpx;
								}
					
								&.add_btn,
								&.reduce_btn {
									padding: 0;
									width: 44rpx;
									border-radius: 44rpx;
								}
							}
					
							.dot {
								position: absolute;
								background-color: #ee0000;
								color: #ffffff;
								font-size: $font-size-sm;
								width: 36rpx;
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								border-radius: 100%;
								right: -12rpx;
								top: -10rpx;
							}
					
							.number {
								width: 44rpx;
								height: 44rpx;
								line-height: 44rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
	
</style>